<template>
  <el-dialog
    :visible.sync="visible"
    title=""
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="50%"
    top="100px"
  >
    <div class="dialogInner">
      <span class="guestSourceName">{{ dataForm.orderType | delType }}</span>
      <div class="personInfo">
        <span>{{ dataForm.linkName }}</span>
        <span>{{ dataForm.linkPhone }}</span>
      </div>
      <el-collapse v-model="activeNames" :border="false">
        <el-collapse-item title="订单信息" name="1">
          <template slot="title">
            <p style="font-weight: 600; font-size: 18px">订单信息</p>
          </template>
          <div class="roomList">
            <div class="p1">
              <p>
                <span>{{ dataForm.goodsName}}</span
                >——<span>{{dataForm.playDateDeal}}</span><span
                  class="status"
                  :style="{
                    background: roomStatusColor2[dataForm.status],
                  }"
                  >{{ dataForm.status | delStatus }}</span
                >
              </p>
              <p>{{ dataForm.orderAmount }}</p>
            </div>
            <!-- 拼船 -->
            <template v-if="dataForm.orderType==3">
            <div class="other" v-if="dataForm.detailJoinDto">
              <p>游客数量：{{ dataForm.detailJoinDto.length }}</p>
            </div>
            <!-- 其他费用/支出明细 -->
            <div class="otherList">
              <p v-for="(o, i) in dataForm.detailJoinDto" :key="i">
                <span>{{ o.touristName }}</span>
                <span>{{ o.touristCode }}</span>
                <span>{{o.status | delStatus}}</span>
              </p>
            </div>
            </template>
            <!-- 特价和包船 -->
             <template v-else>
            <div class="other" v-if="dataForm.detailDto">
              <p>游客数量：{{ dataForm.detailDto.length }}</p>
            </div>
            <!-- 其他费用/支出明细 -->
            <div class="otherList">
              <p v-for="(o, i) in dataForm.detailDto" :key="i">
                <span>{{ o.touristName }}</span>
                <span>{{ o.touristCode }}</span>
                <span></span>
              </p>
            </div>
            </template>
          </div>
          <div></div>
        </el-collapse-item>
      </el-collapse>
      <div class="moneyInfo">
        <span>上船码头:{{ dataForm.isFisheringGoodsDTO.boardSite }}</span>
        <template v-if="dataForm.orderType==3">
        <span>成团人数:{{ dataForm.clusteringNum }}</span>
        <span>还差几人成团:{{ dataForm.clusteringGap }}</span>
        </template>
         <template v-if="dataForm.orderType==1">
        <span>原价:{{ dataForm.isFisheringGoodsDTO.normalPrice }}</span>
        <span>优惠价:{{ dataForm.discountPrice }}</span>
        </template>
        <template v-if="dataForm.orderType==2">
        <span>价格:{{ dataForm.isFisheringGoodsDTO.normalPrice }}</span>
        <span></span>
        </template>
      </div>
      <div class="orderInfo">
        <span>订单金额:{{ dataForm.realPrice }}</span>
        <span>订单号:{{ dataForm.orderCode }}</span>
        <span>下单时间:{{ dataForm.orderTime }}</span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Template from '../devtools/template.vue';
var that;
export default {
  data() {
    return {
      orderStatus: "",
      addOrUpdateVisible: false, //编辑订单
      visible: false,
      orderType: [
        {
          label: "特价",
          value: 1,
        },
        {
          label: "包船",
          value: 2,
        },
        {
          label: "拼船",
          value: 3,
        },
      ],
      payState: [
        {
          label: "待支付",
          value: 0,
        },
        {
          label: "待使用",
          value: 1,
        },
        {
          label: "拼船中",
          value: 2,
        },
        {
          label: "已使用",
          value: 3,
        },
        {
          label: "退款中",
          value: 4,
        },
        {
          label: "已退款",
          value: 5,
        },
        {
          label: "已取消",
          value: 6,
        },
        {
          label: "已完成",
          value: 7,
        },
        {
          label: "拼团失败",
          value: 8,
        },
      ],
      roomStatusColor: {
        0: "#f29130",
        1: "#2d8cf0",
        "-1": "#969799",
        "-2": "#ed4014",
        "-3": "#969799",
        3: "#2d8cf0",
      },
      roomStatusColor2: {
        0: "#ccc",
        1: "#67c23a",
        2: "#f29130",
        3: "#969799",
        4: "#AAA",
        5: "#AAA",
        6: "#AAA",
        7: "#AAA",
        8: "#AAA",
      },
      activeNames: "1",
      dataForm: {
        id: "",
      },
      dialogFormVisible: false,
      check: {
        initiator: 1,
        refundReason: "",
        status: -1,
        orderCode: "",
      },
    };
  },
  components: {Template},
  filters: {
    delStatus(val) {
      let d = that.payState.filter((item) => item.value == val);
      if (d[0]) {
        return d[0].label;
      }
    },
    delType(val) {
      let d = that.orderType.filter((item) => item.value == val);
      if (d[0]) {
        return d[0].label;
      }
    },
  },
  created() {
    that = this;
  },
  methods: {
    init() {
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/api/fishering/personCenterOrderDetail/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-collapse-item__wrap{border-bottom: none!important;}
p {
  margin: 0;
}

.orderInfo {
  position: absolute;
  width: 100%;
  height: 40px;
  background: #f5f5f5;
  line-height: 40px;
  left: 0;
  display: flex;
  justify-content: space-around;
  bottom: 100px;
}

.moneyInfo {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  border: 1px solid #eee;
}

.roomList {
  border-top: 1px solid #eee;
  padding-top: 20px;

  .p1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    p {
      font-size: 16px;

      span {
        &.status {
          display: inline-block;
          color: #fff;
          padding: 3px 5px;
          font-size: 14px;
          border-radius: 5px;
          margin-left: 4px;
        }
      }

      &:last-child {
        color: #f44;
        font-size: 24px;
        font-weight: 600;
        margin: 0;
      }
    }
  }

  .other {
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 15px;
    padding: 0 20px;
    margin-top: 10px;
    margin-bottom: 4px;
  }

  .otherList {
    p {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      font-size: 14px;
      color: #777;
      background: #f5f5f5;
      margin: 0 0 2px 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.personInfo {
  padding: 20px 30px 50px 120px;
  display: flex;
  align-items: center;

  span {
    &:nth-child(1) {
      font-size: 18px;
      margin-right: 50px;
    }

    &:nth-child(2) {
      font-size: 15px;
      flex: 1;
    }

    &:nth-child(3) {
      display: inline-block;
      color: #fff;
      padding: 5px 8px;
      font-size: 16px;
      border-radius: 5px;
      margin-left: 4px;
      min-width: 100px;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
    }
  }
}

.guestSourceName {
  position: absolute;
  top: 12px;
  left: -11px;
  height: 50px;
  width: 140px;
  z-index: 111;
  background: #17b3a3;
  color: #fff;
  border-radius: 0 35px 35px 0;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
}
</style>
